<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Html+Css 练习</title>
  <style>
      /*标签选择器*/
      p {
          color: red;
          font-size: 18px;
      }

      body {
          font-family: "Hiragino Sans GB", "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      }

      /*类选择器*/
      .li-red {
          color: #13c2c2;
      }

      .li-font {
          color: lightblue;
          font-size: 22px;
          text-decoration: underline;
          /*首行缩进*/
          text-indent: 20px;
      }

      .div-read {
          background-color: #adc6ff;
          width: 300px;
          height: 100px;
          border-width: 5px;
          border-style: solid;
          border-color: greenyellow;
          /*单独设置上边框属性*/
          border-top: darksalmon dotted 3px;
      }

      .div-limegreen {
          background-color: limegreen;
          width: 300px;
          height: 100px;
          border: lavenderblush dashed 5px;
      }

      /*id选择器*/
      #id-read {
          color: greenyellow;
      }

      /*通配符选择*/
      * {
          page-policy: first;
      }

      .nav li {
        color: red;
      }

      #li-one {
          color: #ff9900;
          font-weight: bold;
      }
  </style>

</head>
<body>


<p>有点意思</p>
<p>公元400年，罗马帝国崩溃。处于帝国边缘的英伦更是不能幸免。
  几百年后，当地的昂格鲁-萨克森人，不知道那些存留下来的宏伟建筑和城墙到底是谁建造的，只能传说是史前巨人的杰作。
  他们并不知道，这些其实是更高文明的遗迹，而更高文明也可以崩溃，被野蛮人打败。历史并不总是直线向前。</p>

<ul>
  <li class="li-red">李香兰</li>
  <li class="li-red li-font">飞鸟与蝉</li>
</ul>

<div class="div-read">

</div>

<div class="div-limegreen">

</div>

<div class="div-read">

</div>

<ul class="nav">
  <li id="li-one">人生的风景</li>
  <li>就像大海的蜂拥</li>
</ul>

</body>
</html>